<template>
  <div style="padding: 32px 0; background: #fafafa; min-height: 100vh; max-width: 1400px; margin: 0 auto;">
    <!-- 拼团信息 -->
    <el-card style="margin-bottom: 24px;">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div style="font-weight: bold; font-size: 18px;">拼团信息</div>
        <div>
          <el-button @click="handleBack">取消</el-button>
          <el-button type="danger" @click="handleSubmit">保存</el-button>
        </div>
      </div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" style="margin-top: 18px; max-width: 700px;">
        <el-form-item label="*拼团名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入拼团名称" />
        </el-form-item>
        <el-form-item label="*活动时间" prop="time">
          <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="*状态">
          <el-button :type="form.online === '上线' ? 'danger' : 'default'" @click="form.online = '上线'">上线</el-button>
          <el-button :type="form.online === '下线' ? 'danger' : 'default'" @click="form.online = '下线'">下线</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 商品信息 -->
    <el-card>
      <div style="font-weight: bold; font-size: 18px; margin-bottom: 18px;">商品信息</div>
      <el-button style="margin-bottom: 12px;" >选择商品</el-button>
      <el-table :data="pagedProducts" border style="width: 100%; margin-bottom: 12px;">
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="name" label="商品名称" min-width="140" />
        <el-table-column prop="originPrice" label="原价" min-width="80" align="center" />
        <el-table-column prop="salePrice" label="销售价" min-width="80" align="center" />
        <el-table-column label="拼团价格" min-width="120" align="center">
          <template #default="{ row }">
            <el-input v-model="row.groupPrice" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="拼团人数" min-width="120" align="center">
          <template #default="{ row }">
            <el-input v-model="row.groupCount" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="已购人数" min-width="120" align="center">
          <template #default="{ row }">
            <el-input v-model="row.boughtCount" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="拼团次数" min-width="120" align="center">
          <template #default="{ row }">
            <el-input v-model="row.groupTimes" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="排序" min-width="100" align="center">
          <template #default="{ row }">
            <el-input v-model="row.sort" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80" align="center">
          <template #default="{ row, $index }">
            <el-button type="danger" link @click="handleDeleteProduct($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total, sizes"
        :current-page="productPage"
        :page-size="productPageSize"
        :total="products.length"
        @current-change="val => productPage = val"
        @size-change="val => productPageSize = val"
        :page-sizes="[10, 20, 50, 100]"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
const form = ref({
  name: '',
  time: [],
  online: '上线'
});
const formRef = ref();
const rules = {
  name: [ { required: true, message: '请输入拼团名称', trigger: 'blur' } ],
  time: [ { required: true, message: '请选择活动时间', trigger: 'change' } ]
};
function handleSubmit() {
  formRef.value.validate().then(() => {
    ElMessage.success('保存成功（mock）');
    router.back();
  });
}
function handleBack() {
  router.back();
}
// 商品信息
const products = ref([
  { id: '177256', name: '电动牙刷', originPrice: 20, salePrice: 15, groupPrice: '', groupCount: '', boughtCount: 100, groupTimes: '', sort: '' },
  { id: '177256', name: '霸王生发洗发水', originPrice: 20, salePrice: 15, groupPrice: '', groupCount: '', boughtCount: 100, groupTimes: '', sort: '' },
  { id: '177256', name: '艾灸贴', originPrice: 20, salePrice: 15, groupPrice: '', groupCount: '', boughtCount: 100, groupTimes: '', sort: '' },
  { id: '177256', name: '肚脐贴', originPrice: 20, salePrice: 15, groupPrice: '', groupCount: '', boughtCount: 100, groupTimes: '', sort: '' }
]);
const productPage = ref(1);
const productPageSize = ref(10);
const pagedProducts = computed(() => {
  const start = (productPage.value - 1) * productPageSize.value;
  return products.value.slice(start, start + productPageSize.value);
});
function handleDeleteProduct(idx: number) {
  const absIdx = (productPage.value - 1) * productPageSize.value + idx;
  products.value.splice(absIdx, 1);
}
// mock 加载数据
onMounted(() => {
  // 可根据 route.params.id 加载数据
  form.value.name = '春季拼团活动';
  form.value.time = ['2021-03-02', '2017-03-12'];
  form.value.online = '上线';
});
</script>

<style scoped>
.el-card {
  margin-bottom: 24px;
}
</style> 